const path = require('path');

module.exports = {
    pages: {
        index: {
            entry: './src/index.js',
            template: 'public/index.html',
            filename: 'index.html',
        },
    },
    publicPath: './',
    outputDir: path.resolve(process.cwd(), process.env.NODE_ENV === 'release' ? './dist' : './lib'),
    configureWebpack: (conf) => {
        if (process.env.NODE_ENV === 'development' || process.env.NODE_ENV === 'release') {
            conf = {
                entry: {
                    index: './examples/main.js',
                },
                resolve: {
                    extensions: ['.js', '.vue', '.json', '.scss'],
                    alias: conf.resolve.alias,
                    modules: ['node_modules'],
                },
                output: {
                    filename: 'js/[name].[contenthash].js',
                    chunkFilename: 'js/[name].[contenthash].js',
                },
                optimization: {
                    minimize: true,
                    // Tree Shaking 是一种消除未使用代码的技术，它可以在打包过程中去除未使用的模块、函数或变量
                    usedExports: true,
                },
            };
        } else {
            conf = {
                entry: conf.entry,
                output: {
                    filename: '[name].js',
                    chunkFilename: '[id].js',
                    libraryExport: 'default',
                    library: 'sibui',
                    libraryTarget: 'umd',
                },
                resolve: {
                    extensions: ['.js', '.vue', '.json'],
                    alias: conf.resolve.alias,
                    modules: ['node_modules'],
                },
                /**
                 * externals内配置的插件视为全局变量，从外部引入对应的库
                 * root: 'Vue': 当在浏览器环境中引入 Vue 时，全局变量 Vue 的名称为 'Vue'。这意味着如果你在浏览器环境中直接引入 Vue，你可以通过全局变量 Vue 来访问 Vue 实例、组件等。
                 * commonjs: 'vue': 当在 CommonJS 环境（例如 Node.js）中引入 Vue 时，使用 require('vue') 将会返回 Vue 对象。这是为了适配 CommonJS 规范的模块引入方式。
                 * commonjs2: 'vue': 类似于 commonjs，这也是为了适配 CommonJS 规范，但是针对一些旧版本的模块系统提供的兼容支持。一般情况下，你不需要过多关注这个配置。
                 * amd: 'vue': AMD 是另一种模块定义规范，用于浏览器端的模块化开发。这里的配置表示在 AMD 环境中引入 Vue 时，模块名为 'vue'。
                 */
                externals: {
                    echarts: 'echarts',
                    'element-plus': {
                        root: 'ElementPlus',
                        commonjs: 'element-plus',
                        commonjs2: 'element-plus',
                        amd: 'element-plus',
                    },
                    '@element-plus/icons-vue': {
                        root: 'ElementPlusIconsVue',
                        commonjs: '@element-plus/icons-vue',
                        commonjs2: '@element-plus/icons-vue',
                        amd: '@element-plus/icons-vue',
                    },
                    vue: {
                        root: 'Vue',
                        commonjs: 'vue',
                        commonjs2: 'vue',
                        amd: 'vue',
                    },
                },
                optimization: {
                    minimize: true,
                    // Tree Shaking 是一种消除未使用代码的技术，它可以在打包过程中去除未使用的模块、函数或变量
                    usedExports: true,
                },
            };
        }
        return conf;
    },
    productionSourceMap: false,
    lintOnSave: true,
    devServer: {
        port: 8888,
        hot: true,
    },
};
